*{
    margin: 0;padding: 0;list-style: none;box-sizing: border-box;
}i {
    font-style: normal;cursor: pointer;
}.begbox{
    position: absolute;top: 0;left: 0;z-index: -2;width: 100%;height: 100%;background: url(http://img1.kwcdn.kuwo.cn/star/albumcover/240/48/79/1272165134.jpg) no-repeat center center;
    background-size: cover;
    /* 模糊 */
    filter: blur(50px);
    transition: all 1s;
}.box{
    width: 400px;height: 600px;
    background: #242A40;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 10.5px );
    -webkit-backdrop-filter: blur( 10.5px );
    border-radius: 10px;
    /* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
    margin:20px auto;padding:60px 40px;
}.head{
    width: 100%;padding: 10px;
    text-align: center;margin-bottom: 10px;
}.nameText{
   color: white;
}.nameSmall{
    color: white;font-size: 13px;
}.image-div{
    width: 200px;height: 200px;border-radius: 50%;margin: auto;
    position: relative;overflow: hidden;
}.backGroundImg{
    position: absolute;
    width: 100%;height: 100%;
    /* background: url(http://img1.kwcdn.kuwo.cn/star/albumcover/240/48/79/1272165134.jpg); */
    background-size: 100% 100%;
    animation: anmtionName 5s infinite linear;
    animation-play-state: paused;/*初始暂停旋转  running  */
    
}@keyframes anmtionName{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.maskLayer{
    width: 65px;height: 65px;background-color: #242a40a0;position: absolute;left: calc(50% - 32.5px);top: calc(50% - 32.5px);border-radius: 50%;text-align: center;line-height: 65px;transition: all .5s;
}.maskLayer:hover{
    background-color: #ABDBFF;
}.icon-24gf-pause2{
    font-size: 27px!important;
    color: white;
}.icon-24gl-play{
    font-size: 27px!important;
    color: white;
    font-weight: 700px;
}#lyric{
    text-align: center;
    margin: 25px 0 30px 0;font-size: 14px;color: white;
}.Switch{
    /* border: 1px solid black; */
    /* margin-top: 10px; */
    text-align: center;
    padding: 10px;
}.Switch i{
    font-size: 30px!important;
    color: #BEC3C6;
}.Switch span:hover i{
    color: #ABDBFF;
}.Progress{
    width: 100%;
    /* border: 1px solid black; */
    font-size: 13px;height: 8px;line-height: 8px;
    color: white;margin-top: 10px;
}#StartSpan{
    float: left;
}#endSpan{
    float: right;
}.ProgressBars{
    width: 70%;
    float: left;
    height: 8px;margin-left:12px;
    border-radius: 20px;
}.misic_Bars{
    width: 100%;height: 8px;
    border-radius: 20px; background-color: #12141F;
    overflow: hidden;
}.misicline{
    height: 100%;background-color: pink;
}.voice{
    width: 100%;
    /* border: 1px solid black; */
    font-size: 13px;height: 8px;line-height: 8px;
    color: white;margin-top: 40px;
}.lowVoice{
    float: left;
}.voice i{
    color: #397298;
    font-size: 20px!important;
}.loudVoice{
    float: right;
}.ProgressVoice{
   
    width: 80%;
    float: left;
    height: 8px;margin-left:13px;
    border-radius: 20px;
}.Voice_Bars{
    width: 100%;height: 8px;
    border-radius: 20px; background-color: #09090D;
    overflow: hidden;
}.Voice_line{
    width: 50%;height: 100%; background-color: rgb(249, 97, 97);
}